<template>
   <div class="platform-home">
      <div class="platform-home-header flex_bw_center margin-bottom-10">
         <div class="platform-home-header-left">
            <div class="platform-home-header-left-title flex_center_center">
               <span class="margin-right-10">你好,{{userName}}</span>

               <div class="platform-home-header-left-title-time">
                  <el-select
                     v-model="value"
                     style="width: 100px"
                  >
                     <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                     />
                  </el-select>
               </div>
            </div>
         </div>
         <div class="platform-home-header-right">
            {{ "今天是" + new Date().toLocaleDateString() + "，本周的第" + new Date().getDay() + "天" }}
         </div>
      </div>

      <div class="platform-home-content">
         <div class="platform-home-content-top margin-bottom-10">
            <div class="dashboard-grid">
               <div
                  class="dashboard-card header-card"
                  v-for="item in dashboardData"
                  :key="item.title"
                  v-animate-on-scroll
               >
                  <div class="card-header">
                     <span class="card-title">{{ item.title }}</span>
                     <span class="card-icon">
                        <!-- 图标占位 -->

                        <el-icon
                           :size="30"
                           color="#FFFFFF"
                        >
                           <component :is="item.icon"></component>
                        </el-icon>
                     </span>
                  </div>
                  <div class="card-main">
                     <span class="card-value">
                        <count-to
                           :start-val="0"
                           :end-val="parseFloat(item.value.toString().replace(/,/g, ''))"
                           :duration="1000"
                           :decimal="item.title.includes('金额') ? 2 : 0"
                           :separator="item.title.includes('金额') ? ',' : ''"
                           :autoplay="true"
                        />
                     </span>
                     <span
                        class="card-change"
                        :class="item.change > 0 ? 'up' : item.change < 0 ? 'down' : ''"
                        v-if="item.unit"
                     >
                        {{ item.change > 0 ? "+" : "" }}{{ item.change }}{{ item.unit }}
                     </span>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- 可视化图表 -->
      <div class="platform-home-content-bottom">
         <div class="platform-home-content-bottom-top">
            <!-- 采购商品分类占比 -->
            <div class="platform-home-content-bottom-top-left dashboard-card">
               <div
                  class="chart-container"
                  id="sales-bar-chart"
               ></div>
               <div class="chart-legend">
                  <div class="legend-item">
                     <span
                        class="legend-dot"
                        style="background-color: #818cf8"
                     ></span>
                     <span class="legend-label">电器</span>
                     <span class="legend-value">12200.00</span>
                  </div>
                  <div class="legend-item">
                     <span
                        class="legend-dot"
                        style="background-color: #fbbf24"
                     ></span>
                     <span class="legend-label">服饰鞋类</span>
                     <span class="legend-value">24000.00</span>
                  </div>
                  <div class="legend-item">
                     <span
                        class="legend-dot"
                        style="background-color: #34d399"
                     ></span>
                     <span class="legend-label">生活用品</span>
                     <span class="legend-value">21020.00</span>
                  </div>
                  <div class="legend-item">
                     <span
                        class="legend-dot"
                        style="background-color: #f87171"
                     ></span>
                     <span class="legend-label">美妆护肤</span>
                     <span class="legend-value">18900.00</span>
                  </div>
                  <div class="legend-item">
                     <span
                        class="legend-dot"
                        style="background-color: #3b82f6"
                     ></span>
                     <span class="legend-label">食品</span>
                     <span class="legend-value">42000.00</span>
                  </div>
               </div>
            </div>

            <!-- 供应商排行榜 -->
            <div class="platform-home-content-bottom-top-center dashboard-card">
               <div
                  class="chart-container"
                  id="completion-rate-chart"
               ></div>
               <div class="chart-legend"></div>
            </div>

            <!-- 采购商品TOP5 -->
            <div class="platform-home-content-bottom-top-right dashboard-card">
               <div
                  class="chart-container"
                  id="product-category-chart"
               ></div>
            </div>
         </div>
         <div class="platform-home-content-bottom-bottom">
            <div class="platform-home-content-bottom-bottom-left dashboard-card">
               <div
                  class="card-title"
                  style="position: relative; top: -45px"
               >
                  采购商品金额排行
               </div>
               <el-table
                  :data="tableData"
                  style="width: 100%"
                  :row-class-name="tableRowClassName"
               >
                  <el-table-column
                     width="140"
                     prop="name"
                     label="产品名称"
                  />
                  <el-table-column
                     prop="specifications"
                     label="规格型号"
                     width="160"
                  />
                  <el-table-column
                     prop="units"
                     label="单位"
                     width="60"
                  />
                  <el-table-column
                     prop="number"
                     label="采购数量"
                     width="90"
                  />
                  <el-table-column
                     prop="price"
                     label="采购金额（元）"
                     width="140"
                  >
                     <template #default="scope">
                        <span style="color: #f8b351">{{ scope.row.price }}</span>
                     </template>
                  </el-table-column>
               </el-table>
            </div>
            <div class="platform-home-content-bottom-bottom-right dashboard-card">
               <div
                  class="chart-container"
                  id="supplier-ranking-chart"
               ></div>
            </div>
         </div>
      </div>
   </div>
</template>

<script setup lang="ts">
   import { Swiper, SwiperSlide } from "swiper/vue";
   import { Autoplay, Mousewheel } from "swiper/modules";
   import "swiper/css";
   import { ref, onMounted, nextTick } from "vue";
   import api from "@/api/index.js";
   import { ElMessage } from "element-plus";
   import * as echarts from "echarts";
   import CountTo from "./components/CountTo.vue";

   interface options {
   value: string,
   label: string,
}
const options: options[] = [
    {
        value: 'year',
        label: '本年',

    },
    {
        value: 'month',
        label: '本月',
    },
    {
        value: 'week',
        label: '本周',
    },
    {
        value: 'day',
        label: '本日',
    }
   ]
   // 自定义指令：元素进入视口时添加动画
   const vAnimateOnScroll = {
      mounted: (el) => {
         const observer = new IntersectionObserver(
            (entries) => {
               entries.forEach((entry) => {
                  if (entry.isIntersecting) {
                     el.classList.add("animate-in");
                     observer.unobserve(el);
                  }
               });
            },
            { threshold: 0.1 }
         );
         observer.observe(el);
      },
   };

   const value = ref("");

   const tableData = [
      {
         name: "华为笔记本电脑",
         specifications: "MateBook D 14",
         units: "台",
         number: 100,
         price: 100,
      },
      {
         name: "小米手机",
         specifications: "MateBook D 14",
         units: "台",
         number: 100,
         price: 100,
      },
      {
         name: "海尔洗衣机",
         specifications: "MateBook D 14",
         units: "台",
         number: 100,
         price: 100,
      },
      {
         name: "华为笔记本电脑",
         specifications: "MateBook D 14",
         units: "台",
         number: 100,
         price: 100,
      },
   ];

   const dashboardData = [
      { title: "新增客户（人）", value: 42, change: 0, unit: "", icon: "Histogram" },
      { title: "新增销售（单）", value: 128, change: 4.2, unit: "%", icon: "List" },
      { title: "销售金额（元）", value: "300,000.00", change: -1.8, unit: "%", icon: "WalletFilled" },
      { title: "销售退货（单）", value: 8, change: -1.2, unit: "%", icon: "Management" },
      { title: "销售退货金额（元）", value: 9800, change: 1.5, unit: "%", icon: "GoodsFilled" },
   ];

   // 待办事项数据
   const todoList = ref([
      { title: "王当的采购申请审批", date: "2024-02-21" },
      { title: "李五的采购申请审批", date: "2024-02-20" },
      { title: "赵六顺的采购申请审批", date: "2024-02-18" },
      { title: "伍万里的采购申请审批", date: "2024-02-16" },
      { title: "刘万的采购申请审批", date: "2024-02-16" },
      { title: "张三的采购申请审批", date: "2024-02-15" },
      { title: "李四的采购申请审批", date: "2024-02-14" },
   ]);

   // 分类数据
   const categoryData = ref([
      { name: "电器", value: 38200.0, color: "#3B82F6", percent: "34%" },
      { name: "服饰鞋类", value: 12000.0, color: "#FBBF24", percent: "11%" },
      { name: "生活用品", value: 54020.0, color: "#10B981", percent: "24%" },
      { name: "美妆护肤", value: 34000.0, color: "#F87171", percent: "15%" },
      { name: "食品", value: 82000.0, color: "#3B82F6", percent: "16%" },
   ]);

   // 采购分类数据
   const purchaseCategoryData = ref([
      { name: "电器", value: 12200.0, color: "#818CF8", percent: "15%" },
      { name: "服饰鞋类", value: 24000.0, color: "#FBBF24", percent: "30%" },
      { name: "生活用品", value: 21020.0, color: "#34D399", percent: "25%" },
      { name: "美妆护肤", value: 18900.0, color: "#F87171", percent: "20%" },
      { name: "食品", value: 42000.0, color: "#3B82F6", percent: "10%" },
   ]);

   // 供应商数据
   const supplierData = ref([
      { name: "供应商一", value: 18234.96 },
      { name: "供应商二", value: 18234.96 },
      { name: "供应商三", value: 18234.96 },
      { name: "供应商四", value: 18234.96 },
      { name: "供应商五", value: 18234.96 },
      { name: "其他", value: 18234.96 },
   ]);

   // 初始化销售业绩图表
   const initSalesChart = () => {
      nextTick(() => {
         const chartDom = document.getElementById("sales-bar-chart");
         if (chartDom) {
            const myChart = echarts.init(chartDom); // 初始化图表

            const option = {
               title: {
                  text: "采购商品分类占比",
                  textStyle: {
                     fontSize: 15,
                     fontWeight: "bold",
                  },
               },
               legend: {
                  show: false, // 是否显示图例
               },
               tooltip: {
                  trigger: "item",
                  formatter: "{a} <br/>{b} : {c} ({d}%)",
               },
               series: [
                  {
                     name: "采购商品分类占比",
                     type: "pie",
                     radius: [0, 70],
                     center: ["50%", "50%"],
                     roseType: "area",
                     itemStyle: {
                        borderRadius: 8, // 圆角
                     },

                     label: {
                        show: false, // 是否显示标签
                        formatter: "{d}%", // 标签格式化
                        fontSize: 12, // 标签字体大小
                        color: "#333", // 标签颜色
                        fontWeight: "bold", // 标签字体加粗
                        lineHeight: 20, // 标签行高
                     },
                     emphasis: {
                        label: {
                           show: true, // 是否显示高亮标签
                        },
                     },
                     data: [
                        { value: 40, name: "rose 1" },
                        { value: 38, name: "rose 2" },
                        { value: 32, name: "rose 3" },
                        { value: 30, name: "rose 4" },
                        { value: 28, name: "rose 5" },
                     ],
                  },
               ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => myChart.resize());
         }
      });
   };
   // 供应商排行榜
   const initCompletionRateChart = () => {
      nextTick(() => {
         const chartDom = document.getElementById("completion-rate-chart");
         if (chartDom) {
            const myChart = echarts.init(chartDom);

            // 计算最大值，用于设置柱状图的宽度比例
            const maxValue = Math.max(...supplierData.value.map((item) => item.value));

            const option = {
               title: {
                  text: "供应商排行榜",
                  textStyle: {
                     fontSize: 16,
                     fontWeight: "bold",
                  },
               },
               tooltip: {
                  trigger: "axis",
                  axisPointer: {
                     type: "shadow",
                  },
                  formatter: "{b}: ¥{c}",
                  backgroundColor: "#fff",
                  borderColor: "#eee",
                  borderWidth: 1,
                  textStyle: { color: "#333" },
                  extraCssText: "box-shadow:0 2px 8px rgba(0,0,0,0.08);",
               },
               grid: {
                  left: "22%",
                  right: "15%",
                  top: "12%",
                  bottom: "3%",
                  containLabel: false,
               },
               xAxis: {
                  type: "value",
                  axisLine: {
                     show: false,
                  },
                  axisTick: {
                     show: false,
                  },
                  axisLabel: {
                     show: false,
                  },
                  splitLine: {
                     show: false,
                  },
               },
               yAxis: {
                  type: "category",
                  inverse: false,
                  data: supplierData.value.map((item) => item.name),
                  axisLine: {
                     show: false,
                  },
                  axisTick: {
                     show: false,
                  },
                  axisLabel: {
                     color: "#333",
                     fontSize: 14,
                     margin: 20,
                  },
               },
               series: [
                  {
                     name: "金额",
                     type: "bar",
                     barWidth: 20,
                     data: supplierData.value.map((item) => item.value),
                     itemStyle: {
                        color: "#3B82F6",
                        borderRadius: [0, 4, 4, 0],
                     },
                     label: {
                        show: true,
                        position: "right",
                        formatter: "¥{c}",
                        fontSize: 14,
                        color: "#333",
                        distance: 5,
                     },
                  },
               ],
            };

            myChart.setOption(option);
            window.addEventListener("resize", () => myChart.resize());
         }
      });
   };
   // 采购商品TOP5
   var colorList = ["#f36c6c", "#e6cf4e", "#20d180", "#0093ff"];
   var datas = [
      {
         value: 1236,
         name: "商务系统数字化办公平台1",
      },
      {
         value: 1214,
         name: "商务系统数字化办公平台2",
      },
      {
         value: 1129,
         name: "商务系统数字化办公平台3",
      },
      {
         value: 925,
         name: "商务系统数字化办公平台4",
      },
      {
         value: 855,
         name: "商务系统数字化办公平台5",
      },
   ];
   const initProductCategoryChart = () => {
      nextTick(() => {
         const chartDom = document.getElementById("product-category-chart");
         if (chartDom) {
            const myChart = echarts.init(chartDom);
            const option = {
               title: {
                  text: "采购商品TOP5",
                  textStyle: {
                     fontSize: 16,
                     fontWeight: "bold",
                  },
               },
               tooltip: {
                  trigger: "axis",
                  axisPointer: {
                     type: "shadow",
                  },
               },
               legend: {
                  show: false,
               },
               grid: {
                  // left: "0%",
                  // right: "5%",
                  top: "15%",
                  bottom: "5%",
                  // containLabel: true,
               },
               xAxis: {
                  show: false,
                  type: "value",
               },
               yAxis: [
                  {
                     type: "category",
                     inverse: true,
                     axisLine: {
                        show: false,
                     },
                     axisTick: {
                        show: false,
                     },
                     axisPointer: {
                        label: {
                           show: true,
                           margin: 30,
                        },
                     },
                     data: datas.map((item) => item.name),
                     axisLabel: {
                        margin: 60,
                        fontSize: 13,
                        align: "left",
                        color: "#333",
                        width: 200,
                        overflow: "truncate",
                        // rich: {
                        //    a1: {
                        //       color: "#fff",
                        //       backgroundColor: colorList[0],
                        //       width: 30,
                        //       height: 30,
                        //       align: "center",
                        //       borderRadius: 2,
                        //    },
                        //    a2: {
                        //       color: "#fff",
                        //       backgroundColor: colorList[1],
                        //       width: 30,
                        //       height: 30,
                        //       align: "center",
                        //       borderRadius: 2,
                        //    },
                        //    a3: {
                        //       color: "#fff",
                        //       backgroundColor: colorList[2],
                        //       width: 30,
                        //       height: 30,
                        //       align: "center",
                        //       borderRadius: 2,
                        //    },
                        //    a4: {
                        //       color: "#fff",
                        //       backgroundColor: colorList[3],
                        //       width: 30,
                        //       height: 30,
                        //       align: "center",
                        //       borderRadius: 2,
                        //    },
                        //    a5: {
                        //       color: "#fff",
                        //       backgroundColor: colorList[3],
                        //       width: 30,
                        //       height: 30,
                        //       align: "center",
                        //       borderRadius: 2,
                        //    },
                        // },
                        formatter: function (params) {
                           var index = datas.map((item) => item.name).indexOf(params);
                           index = index + 1;
                           return "";
                        },
                     },
                  },
                  {
                     type: "category",
                     inverse: true,
                     axisTick: "none",
                     axisLine: "none",
                     show: true,
                     data: datas.map((item) => item.value),
                     axisLabel: {
                        show: true,
                        fontSize: 14,
                        color: "#333",
                        formatter: "{value}",
                     },
                  },
               ],
               series: [
                  {
                     z: 2,
                     name: "value",
                     type: "bar",
                     barCategoryGap: "50%",
                     barGap: "30%",
                     barWidth: 16,
                     data: datas.map((item, i) => {
                        var itemStyle = {
                           color: colorList[i],
                           barBorderRadius: [10, 10, 10, 10],
                        };
                        return {
                           value: item.value,
                           itemStyle: itemStyle,
                        };
                     }),
                     label: {
                        normal: {
                           color: "#666",
                           show: true,
                           position: [0, "-20px"],
                           textStyle: {
                              fontSize: 13,
                           },
                           formatter: function (a) {
                              // 截断过长的名称
                              let name = a.name;
                              if (name.length > 12) {
                                 name = name.substring(0, 12) + "...";
                              }
                              return name;
                           },
                        },
                     },
                  },
               ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => myChart.resize());
         }
      });
   };

   const initSupplierRankingChart = () => {
      nextTick(() => {
         const chartDom = document.getElementById("supplier-ranking-chart");
         if (chartDom) {
            const myChart = echarts.init(chartDom);
            const option = {
               title: {
                  text: "采购退货信息",
                  textStyle: {
                     fontSize: 16,
                     fontWeight: "bold",
                  },
               },
               tooltip: {
                  trigger: "axis",
               },
               legend: {
                  data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
               },
               grid: {
                  left: "3%",
                  right: "4%",
                  bottom: "3%",
                  containLabel: true,
               },
               toolbox: {
                  // feature: {
                  //    saveAsImage: {},
                  // },
               },
               xAxis: {
                  type: "category",
                  boundaryGap: false,
                  data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
               },
               yAxis: {
                  type: "value",
               },
               series: [
                  {
                     name: "Email",
                     type: "line",
                     stack: "Total",
                     data: [120, 132, 101, 134, 90, 230, 210],
                  },
                  {
                     name: "Union Ads",
                     type: "line",
                     stack: "Total",
                     data: [220, 182, 191, 234, 290, 330, 310],
                  },
                  {
                     name: "Video Ads",
                     type: "line",
                     stack: "Total",
                     data: [150, 232, 201, 154, 190, 330, 410],
                  },
                  {
                     name: "Direct",
                     type: "line",
                     stack: "Total",
                     data: [320, 332, 301, 334, 390, 330, 320],
                  },
                  {
                     name: "Search Engine", // 名称
                     type: "line",
                     stack: "Total", // 堆叠
                     data: [820, 932, 901, 934, 1290, 1330, 1320],
                  },
               ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => myChart.resize());
         }
      });
   };
   let userName = ref("");
   // 初始化标题，拿到用户的信息
   const initTitle = () => {
      
      const userInfo = JSON.parse(localStorage.getItem("userInfo") || '{}');
      if (userInfo) {
         userName.value = userInfo.nickname;
      }
   }
   onMounted(() => {
      initTitle();
      initSalesChart();
      initCompletionRateChart();
      initProductCategoryChart();
      initSupplierRankingChart();

      // 添加页面载入动画
      document.querySelector(".platform-home")?.classList.add("page-loaded");
   });
</script>

<style scoped lang="scss">
   .platform-home {
      width: 100%;
      height: 90vh;
      font-family: 黑体;
      letter-spacing: 2px;
      opacity: 0;
      // transform: translateY(10px);
      transition: opacity 0.3s ease, transform 0.3s ease;

      &.page-loaded {
         opacity: 1;
         transform: translateY(0);
      }

      &_header {
         &_right {
            color: #a1a1a1;
         }
      }

      &_content {
         width: 100%;
         height: 100%;
         border: 1px solid blue;
      }
   }

   .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-gap: 14px;
      margin: 0 auto;
      // max-width: 1600px;
   }
   .dashboard-card {
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
      border: 1px solid #f0f0f0;
      padding: 14px 20px 14px 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 90px;
      transition: box-shadow 0.2s;
      position: relative;
      opacity: 0;
      transform: translateY(20px);

      &:not(.header-card):hover {
         box-shadow: 0 4px 24px 0 rgba(64, 158, 255, 0.12);
      }
   }

   .card-header {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 12px;
   }

   .card-title {
      font-size: 15px;
      color: #666;
      font-weight: 500;
   }

   .card-icon {
      position: absolute;
      left: 16px;
      top: 20px;
      width: 74px;
      height: 74px;
      background: #6860ff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      .icon-placeholder {
         width: 44px;
         height: 44px;
         background: #d3d6e4;
         border-radius: 50%;
         display: inline-block;
      }
   }

   .card-main {
      display: flex;
      align-items: baseline;
      justify-content: flex-start;
      gap: 10px;
      transform: translateX(79px);
      width: 50%;
      margin-bottom: 13px;
   }

   .card-value {
      font-size: 2rem;
      font-weight: bold;
      color: #222;
   }

   .card-change {
      font-size: 1rem;
      margin-left: 6px;
      position: absolute;
      bottom: 7px;
      right: -62px;
      &.up {
         color: #1ecb8c;
      }

      &.down {
         color: #f56c6c;
      }
   }
   .platform-home-content-bottom {
      width: 100%;
      height: calc(100% - 148px);
      .platform-home-content-bottom-top {
         width: 100%;
         height: 45%;
         display: flex;
         gap: 15px;
         flex-direction: row;
         margin-bottom: 16px;
         // 采购商品分类占比
         .platform-home-content-bottom-top-left {
            display: flex;
            flex-direction: column;
            width: 20%;

            .chart-container {
               flex: 4;
               width: 100%;

               height: 100%;
            }
            .chart-legend {
               flex: 1;
               width: 100%;
               flex-wrap: wrap;
               display: flex;
               justify-content: space-between;
               .legend-item {
                  display: flex;
                  align-items: center;
                  font-size: 12px;
                  margin-right: 10px;
                  margin-bottom: 5px;
               }

               .legend-dot {
                  display: inline-block;
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  margin-right: 6px;
               }

               .legend-label {
                  color: #666;
                  margin-right: 6px;
               }

               .legend-value {
                  color: #333;
                  font-weight: 500;
               }
            }
         }
         // 供应商排行榜
         .platform-home-content-bottom-top-center {
            width: 40%;

            .chart-container {
               flex: 4;
               width: 100%;
               height: 100%;
            }
         }
         // 采购商品TOP5
         .platform-home-content-bottom-top-right {
            width: 40%;

            .chart-container {
               flex: 4;
               width: 100%;
               height: 100%;
            }
         }
      }
      .platform-home-content-bottom-bottom {
         width: 100%;
         height: 50%;
         display: flex;
         flex-direction: row;
         gap: 20px;
         .platform-home-content-bottom-bottom-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;
            width: 40%;
            .card-title {
               font-size: 16px;
               font-weight: bold;
               line-height: 20px;
            }
         }
         .platform-home-content-bottom-bottom-right {
            width: 60%;
            .chart-container {
               flex: 4;
               width: 100%;

               height: 100%;
            }
         }
      }
   }
   .card-title {
      font-size: 15px;
      color: #666;
      font-weight: 500;
      line-height: 20px;
   }

   // 动画效果
   @keyframes fadeInUp {
      from {
         opacity: 0;
         transform: translateY(20px);
      }
      to {
         opacity: 1;
         transform: translateY(0);
      }
   }

   @keyframes scaleIn {
      from {
         transform: scale(0.95);
         opacity: 0;
      }
      to {
         transform: scale(1);
         opacity: 1;
      }
   }

   // 应用动画
   .animate-in {
      animation: fadeInUp 0.3s forwards;
      &:nth-child(1) {
         animation-delay: 0.05s;
      }
      &:nth-child(2) {
         animation-delay: 0.1s;
      }
      &:nth-child(3) {
         animation-delay: 0.15s;
      }
      &:nth-child(4) {
         animation-delay: 0.2s;
      }
      &:nth-child(5) {
         animation-delay: 0.25s;
      }
   }

   .platform-home-content-bottom {
      .platform-home-content-bottom-top {
         > div {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.3s forwards;
            &:nth-child(1) {
               animation-delay: 0.3s;
            }
            &:nth-child(2) {
               animation-delay: 0.35s;
            }
            &:nth-child(3) {
               animation-delay: 0.4s;
            }
         }
      }

      .platform-home-content-bottom-bottom {
         > div {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.3s forwards;
            &:nth-child(1) {
               animation-delay: 0.45s;
            }
            &:nth-child(2) {
               animation-delay: 0.5s;
            }
         }
      }
   }
</style>
